<template>
  <data-table-app-page>
    <el-form slot="toolbar" inline :model="searchForm">
      <el-form-item label="订单号">
        <el-input v-model="searchForm.orderno" clearable style="width: 200px" />
      </el-form-item>
      <el-form-item label="订单生成时间">
        <el-date-picker
          v-model="searchForm.createTimes"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          align="right"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          :picker-options="pickerOptions"
          style="width: 320px"
        />
      </el-form-item>
      <el-form-item>
        <data-table-query-button :query-params="getQueryParams" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="default"
          icon="el-icon-download"
          @click="onExportClick"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <data-table
      ref="table"
      url="/api/shop/yanglaoOrderReport/page"
      :pagination="{pageSize: 20}"
      lazy
    >
      <el-table-column label="老人地址" align="center">
        <el-table-column prop="homeAddress" label="户籍地址" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="orderAddress" label="订单地址" width="140" show-overflow-tooltip></el-table-column>
      </el-table-column>
      <el-table-column prop="orderLinkman" label="订单人姓名" width="70" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cardName" label="持卡人姓名" width="70" show-overflow-tooltip></el-table-column>
      <el-table-column prop="idcard" label="持卡人身份证号" width="162" show-overflow-tooltip></el-table-column>
      <el-table-column label="消费数据" align="center">
        <el-table-column prop="orderAmount" label="消费金额" width="60"></el-table-column>
        <el-table-column prop="cashAmount" label="现金消费金额" width="78"></el-table-column>
        <el-table-column prop="cardAmount" label="卡支付金额" width="70"></el-table-column>
      </el-table-column>
      <el-table-column label="补贴数据" align="center">
        <el-table-column prop="allowanceAmount" label="补贴金额" width="60"></el-table-column>
        <el-table-column width="78">
          <template slot="header">市财政 补贴金额</template>
        </el-table-column>
        <el-table-column width="80">
          <template slot="header">区财政 补贴金额</template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="createTime" label="订单生成时间" width="155" show-overflow-tooltip></el-table-column>
      <el-table-column prop="categoryName" label="服务项目类别" width="110" show-overflow-tooltip></el-table-column>
      <el-table-column prop="productName" label="服务项目名称" width="110" show-overflow-tooltip></el-table-column>
      <el-table-column prop="providerName" label="服务供应商名称" width="240" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" min-width="54" fixed="right" v-slot="{row}">
        <el-button type="text" size="medium" @click="onOrderClick(row)" style="padding: 0px">订单</el-button>
      </el-table-column>
    </data-table>

  </data-table-app-page>
</template>

<script>
import { stringify } from 'qs';
import moment from 'moment';

export default {
  pageProps: {
    title: '养老服务订单报表'
  },
  data() {
    return {
      searchForm: {
      },
      pickerOptions: {
        shortcuts: [[30, '最近一个月'], [90, '最近三个月'], [180, '最近六个月']].map(([days, text]) => {
          return {
            text,
            onClick(picker) {
              const end = moment();
              const start = moment();
              picker.$emit('pick', [
                start.subtract(days - 1, 'd').format('YYYY-MM-DD 00:00:00'),
                end.format('YYYY-MM-DD 23:59:59')
              ]);
            }
          };
        })
      }
    }
  },
  mounted() {
    this.$refs.table.query(this.getQueryParams());
  },
  methods: {
    getQueryParams() {
      let queryParams = {...this.searchForm};
      queryParams = {
        ...queryParams,
        ...(queryParams.createTimes ? {
            beginTime: queryParams.createTimes[0],
            endTime: queryParams.createTimes[1]
          } : {})
      };
      delete queryParams.createTimes;
      return queryParams;
    },
    onExportClick() {
      this.$message.info('正在处理导出，请稍等...');
      location.href = "api/shop/yanglaoOrderReport/export?" + stringify(this.getQueryParams());
    },
    onOrderClick({orderno}) {
      this.pushPage({
        path: '/shop/order/details',
        params: {
          order: { orderno }
        },
        key: orderno
      });
    }
  }
}
</script>